import React, { useEffect, useState } from "react";
import {
  Space,
  Table,
  Tag,
  Button,
  Modal,
  message,
  Input,
  Checkbox,
  Form,
} from "antd";
import type { TableProps } from "antd";
import { AudioOutlined } from "@ant-design/icons";
import type { SearchProps } from "antd/es/input/Search";
import type { FormProps } from "antd";
import axios from "axios";
import "./index.css";

const Index: React.FC = () => {
  interface DataType {
    id: any;
    title: any;
    county: any;
    word: any;
    gj: any;
  }

  type FieldType = {
    title?: any;
    county?: any;
    word?: any;
    gj?: any;
    id?: any;
  };
  const [list, setList] = useState<any>([]);
  const { Search } = Input;
  const [form] = Form.useForm();

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "地区",
      dataIndex: "county",
      key: "county",
    },
    {
      title: "描述",
      dataIndex: "word",
      key: "word",
    },
    {
      title: "国家",
      dataIndex: "gj",
      key: "gj",
    },

    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => del(record)}>删除</a>
          <a onClick={() => look(record)}>查看</a>
          <a onClick={() => edit(record)}>修改</a>
        </Space>
      ),
    },
  ];

  const data: DataType[] = list;
  const render = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const [Ckk, setCkk] = useState(false);
  const [kk, setKk] = useState<any>({});
  const look = (record: any) => {
    setCkk(true);
    console.log(record);
    setKk(record);
  };
  const CkkOk = () => {
    setCkk(false);
  };
  const CkkCancel = () => {
    setCkk(false);
  };
  const del = (record: any) => {
    let { id } = record;
    axios.delete("/api/del", { params: { id } }).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };
  const onSearch: SearchProps["onSearch"] = (value: any, _e, info) => {
    axios.get("/api/search", { params: { value } }).then((resp) => {
      let { items } = resp.data;
      setList(items);
    });
  };

  const [Tjk, setTjk] = useState(false);
  const showModal = () => {
    setTjk(true);
  };

  const addhandleOk = () => {
    setTjk(false);
  };

  const addhandleCancel = () => {
    setTjk(false);
  };

  const add = () => {
    console.log("添加");
    setTjk(true);
  };
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    setTjk(false);
    axios.put("/api/add", values).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };

  const [Xgk, setXgk] = useState(false);
  const xghandleOk = () => {
    setXgk(false);
  };
  const xghandleCancel = () => {
    setXgk(false);
  };
  const edit = (record: any) => {
    console.log("修改");
    const items = form.setFieldsValue(record);
    setXgk(true);
  };
  const onFinish1: FormProps<FieldType>["onFinish"] = (record) => {
    console.log(record);
    axios.put("/api/edit", record).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
    setXgk(false);
  };

  return (
    <div>
      <Modal
        title="修改"
        open={Xgk}
        onOk={xghandleOk}
        onCancel={xghandleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish1}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldType>
            label="Id"
            name="id"
            rules={[{ required: true, message: "Please input your id!" }]}
          >
            <Input disabled={true} />
          </Form.Item>
          <Form.Item<FieldType>
            label="Title"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="County"
            name="county"
            rules={[{ required: true, message: "Please input your county!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="Word"
            name="word"
            rules={[{ required: true, message: "Please input your word!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="Gj"
            name="gj"
            rules={[{ required: true, message: "Please input your gj!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      <Modal title="查看" open={Ckk} onOk={CkkOk} onCancel={CkkCancel}>
        <div>ID:{kk.id}</div>
        <div>标题:{kk.title}</div>
        <div>城市:{kk.county}</div>
        <div>描述:{kk.word}</div>
        <div>国家:{kk.gj}</div>
      </Modal>

      <Modal
        title="添加"
        open={Tjk}
        onOk={addhandleOk}
        onCancel={addhandleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="Title"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="County"
            name="county"
            rules={[{ required: true, message: "Please input your county!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="Word"
            name="word"
            rules={[{ required: true, message: "Please input your word!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="Gj"
            name="gj"
            rules={[{ required: true, message: "Please input your gj!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Button type="primary" onClick={() => add()} id="btn">
        添加
      </Button>
      <Search
        placeholder="请输入搜索的内容(例如id、标题、地区、描述、国家)"
        onSearch={onSearch}
        enterButton
      />

      <Table columns={columns} dataSource={data} />
    </div>
  );
};
export default Index;
